<template>
	<view class="box">
		<view class="contented">
			<view class="top">
				<view class="count flex_wrap row_middle row_center">
					<text>张数</text>
					<text class="countt">{{countNum}}</text>
				</view>
				<view>
					<u-text :text="detailInfo.favorableTitle" size="56rpx" color="#FF3C3C" align="center" margin="18rpx 0" />
					<u-text :text="detailInfo.favorableDescription" size="28rpx" color="#3D3D3D" align="center" />
					<u-text :text="`有效期限至` +  $u.timeFormat(detailInfo.cutOffTime, 'yyyy.mm.dd')" size="28rpx" color="#666" align="center" margin="16rpx 0 48rpx" />
				</view>
				<view class="u-line">
					<u-line dashed color="#D8D8D8" />
				</view>
			</view>
			<u-gap height="64rpx"></u-gap>
			<view class="bottom">
				<view >
					<view class="flex_wrap row_center">
						<u-image
							:src="baseSrc"
							width="320rpx" height="320rpx" mode="widthFix" />
					</view>
					<u-gap height="32rpx"></u-gap>
					<u-text text="支付前向商家出示二维码" size="32rpx" color="#3D3D3D" align="center" />
					<u-gap height="64rpx"></u-gap>
				</view>
				<view class="list flex_wrap flex_column">
					<u-row align="top">
						<u-col span="3"><u--text text="适用规则：" color="#666" size="28rpx" /></u-col>
						<u-col span="8"><u--text :text="detailInfo.favorableDescription" color="#666"
								size="28rpx" /></u-col>
					</u-row>
					<u-gap height="32rpx" ></u-gap>
					<u-row align="top">
						<u-col span="3"><u--text text="店铺地址：" color="#666" size="28rpx" /></u-col>
						<u-col span="8"><u--text text="--" color="#1682FF"
								size="28rpx" /></u-col>
					</u-row>
				</view>
			</view>
			<!-- <view class="imgd" v-if="typeUse !== '未使用'">
				<u-image
					:src="typeUse !== '已使用' ? 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/01/09/8c747a1e3236404bbbb75427bc4c2ee7.png':'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/01/19/6cee344510c0413ba050d1988efbf5c8.png'" 
					width="120rpx" height="120rpx" mode="widthFix" />
			</view> -->
		</view>
	</view>
</template>

<script>
	import { getFavorableInfoById} from "@/api/order.js";
	import { storeInRedis ,getMiniCodeByAppId} from "@/api/order.js";
	import { favorableDetail,transfer} from "@/api/coupon.js";
	import { baseUrl } from "@/config/tendIdConfig"
	import { mapGetters } from "vuex"
	export default {
		data() {
			return {
				typeUse:'',
				favorableId:'',
				detailInfo:'',
				baseSrc: "",
				appId: this.$appId,
				countNum:''
			};
		},
		computed: {
			...mapGetters([ "userInfo"])
		},
		mounted() {
			this.getSalesmanInfo()
		},
		onLoad(options) {
			this.countNum = options.couponNum
			this.ledId = options.ledId
			this.getCouponDetail(this.ledId)
		},
		methods: {
			getSalesmanInfo() {
			    const token =
			        this.$store.getters?.customer_token ||
			        uni.getStorageSync("customer_token");
			    const that = this;
			    uni.request({
			        url: baseUrl + "/customer/customer/getCustomerInfoByToken",
			        method: "GET",
			        header: {
			            Authorization: token,
			        },
			        success(res) {
			            that.salesmanUserId = res.data.data.id;
						that.getMiniCode()
			        },
			    });
			},
			getMiniCode(){
				const that = this;
				storeInRedis({
					favorableId: that.ledId,
					userId:that.salesmanUserId
				})
					.then(async (res) => {
						const params = {
						   page: "pages_coupon/writeOff/index",
						   scene:that.scene,
						   env_version: __wxConfig.envVersion,
						   check_path: false,
						   appId: that.appId,
						};
						getMiniCodeByAppId(params).then((res) => {
							if (res.code === 200 && res.data) {
							   var showImgData = res.data;
							   that.baseSrc = "data:image/png;base64," + showImgData;
							}
						});
					})
					.catch((error) => {
						uni.$u.toast(error);
					});
			},
			
			getCouponDetail(ledId){
				favorableDetail(ledId).then((res) => {
					if (res.code === 200 && res.data) {
					   this.detailInfo = res.data
					   this.scene = res.data.ledUniqueId;
					}
				});
			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #1E2137;
	}

	.box {
		padding: 32rpx 28rpx;
	}

	.contented {
		background-image: url('https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/01/09/717a56be5f3e48a791943c3a3b21c8fd.png');
		width: 100%;
		background-repeat: no-repeat;
		height: 716rpx;
		background-size: 100% 100%;
		position: relative;
	}
	.imgd{
		position: absolute;
		top: 0;
		right: 0;
	}
	.top{
		padding: 44rpx 28rpx 0;
	}
	.bottom{
		padding: 0 28rpx 64rpx;
		background-color: #fff;
		border-radius: 12rpx;
	}

	.count {
		font-size: 32rpx;
		color: #DCB210;

		.countt {
			font-size: 48rpx;
			margin-left: 12rpx;
		}
	}
	.counted {
		font-size: 32rpx;
		color: #3D3D3D;
	
		.countt {
			font-size: 48rpx;
			margin-left: 12rpx;
		}
	}
.u-line{
	padding: 0 30rpx;
}
</style>